<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			#box {
				width: 550px;
				height: 550px;
				border: 5px solid gold;

			}
			#box>div {
				width: 90px;
				height: 90px;
				margin: 10px;
				background-color: black;
				float: left;
			}
		</style>
	</head>
	<body>
		<div id="box">
			
		</div>
		
	</body>
</html>
<script>
	var boxDiv = document.getElementById('box');
	for (var i = 0; i < 25; i++) {
		var oDiv = document.createElement('div');
		oDiv.index = i;
		oDiv.on = false;
		boxDiv.appendChild(oDiv);
		oDiv.onclick = function() {

			if (this.index % 5 != 0) {
				changeColor(boxDiv.children[this.index - 1]);
			}
			if (this.index % 5 != 4) {
				changeColor(boxDiv.children[this.index + 1]);
			}
			
			
			changeColor(boxDiv.children[this.index - 5]);
			changeColor(boxDiv.children[this.index + 5]);
			changeColor(boxDiv.children[this.index]);
			judge();
		}
	}



	function changeColor(obj) {
		if (obj) {
			if (obj.on) {
				obj.style.backgroundColor = "green";
			} else {
				obj.style.backgroundColor = "red";
			}
			obj.on = !obj.on;
		}
	}

	function judge() {
		for (var i = 0; i < boxDiv.children.length; i++) {
			if (boxDiv.children[i].on) {
				return; 
			}
		}
		alert("恭喜通关!!!");
	}


</script>




